<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="width: 600px;height: 400px"></div><!--首先制定一个容器-->
<script src="../echarts/dist/echarts.min.js"></script>
</body>
<script>
    var mychart=echarts.init(document.getElementById('main'));//获取容器的节点。
    var option = {
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                xAxisIndex:0,//这个属性标示控制x和y轴的分别==
                start: 10,      // 左边在 10% 的位置。
                end: 60         // 右边在 60% 的位置。
            },
            {//这个也控制x轴，但是可以在坐标系内部
                type:'inside',
                xAxisIndex:0,
                start:10,
                end:60
            },
                //下面对y轴进行控制===================
            {//这是对y轴的基本控制
                type:'slider',
                yAxisIndex:0,
                start:30,
                end:80
            },
            {//这是y轴的内部控制
                type:'inside',
                yAxisIndex:0,
                start:30,
                end:80
            }
        ],
        series: [
            {
                type: 'scatter', // 这是个『散点图』
                itemStyle: {
                    normal: {
                        opacity: 0.8
                    }
                },
                symbolSize: function (val) {
                    return val[2] * 40;
                },
                //data数据中 第一个是x轴坐标  第二个是y轴坐标  第三个是控制大小的
                data: [["14.616","7.241","0.212"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
            }
        ]
    }

    mychart.setOption(option);

</script>
</html>